<template>
  <div>
    <ProTable
      ref="proTable"
      :table-props="{
        border: true,
      }"
      :request-api="fetchTableList"
      :loading="loading"
      :table-data="tableData"
      :init-param="{res:123}"
      :columns="columns"
      @resetHandler="resetHandler"
    >
      <template slot="status" slot-scope="scope">
        <Badge :title="renderStatus(scope).title" :type="renderStatus(scope).type ? 'success' : 'error'" align="center" />
        <!-- <span v-else>-</span> -->
      </template>
      <template slot="btns" slot-scope="scope">
        <el-button size="mini" @click="test(scope)">导入</el-button>
        <el-button size="mini" @click="test(scope)">导出</el-button>
      </template>
      <template slot="actions" slot-scope="scope">
        <el-button type="text" size="mini" @click="editHandler(scope)">编辑</el-button>
        <el-button type="text" size="mini" @click="editHandler(scope)">删除</el-button>
      </template>
    </ProTable>
  </div>
</template>
<script>
import ProTable from '@/components/ProTable'
import Badge from '@/components/Badge'
import { fetchTableList } from '@/api/article'
export default {
  components: {
    ProTable,
    Badge
  },
  data() {
    return {
      fetchTableList,
      loading: false,
      tableData: [{
        name: '1233',
        status: 1,
        id: 1231231243,
        dataTime: '2023-05-15T00:00:00',
        clue_type: '测试'
      },
      {
        name: '12323',
        id: 12312343,
        status: 0,
        clue_type: '测试2'
      }
      ],
      columns: [
        {
          prop: 'author', // 对应列内容的字段名
          label: '姓名', // 显示的标题
          width: 90, // 对应列的宽度
          show: true, // 展示与隐藏
          sortable: true, // 对应列是否可以排序
          disabled: true, // 是否禁用显隐
          search: { el: 'input', props: { placeholder: '输入角色名称' }}
        },
        {
          prop: 'display_time',
          type: 'time',
          label: '时间',
          show: true,
          sortable: false,
          search: { el: 'date-picker', props: { placeholder: '请选择日期', type: 'daterange' }}
        },
        {
          prop: 'status',
          label: '状态',
          show: true,
          enum: [
            { label: '开启', value: 0 },
            { label: '关闭', value: 1 }
          ],
          slot: 'status',
          search: { el: 'select', props: { multiple: true, placeholder: '请选择状态' }},
          sortable: false
        },
        {
          prop: 'type',
          label: '节点类型',
          show: true,
          sortable: false
        },
        {
          prop: 'title',
          label: '地址',
          show: true,
          sortable: false
        },
        {
          prop: 'reviewer',
          label: '创建人',
          show: true,
          sortable: false
        }
      // ... 省略部分字段
      ]
    }
  },
  mounted() {
  },
  methods: {
    renderStatus(item) {
      const { scope: { row: { status } = {}}} = item || {}
      return {
        title: !status ? '开启' : '关闭',
        type: !status
      }
    },
    searchHandler(params) {
      return Object.assign({ ...params }, { a: '测试' })
    },
    resetHandler() {
      this.loading = true
      console.log('重置事件')
      setTimeout(() => {
        this.loading = false
      }, 2000)
    },
    test(res) {
      console.log('点击事件', this.$refs.table, res)
    },
    editHandler(scope) {
      this.$refs.proTable.getTableList()
      console.log('编辑', this.$refs.proTable)
    }
  }
}

</script>
<style scoped>
.col-container{
  display:flex;
  justify-content: end;
  padding: 5px
}
</style>
